<template>
  <header>
    <input
      type="text"
      id="ipt"
      v-model.trim="userTask"
      @keyup.enter="addToDoList"
      placeholder="请输入你的任务名称，按回车键确认"
    />
  </header>
</template>

<script lang="ts">
import { ref } from 'vue'
export default {
  name: 'Header',
  setup(props:any, { emit }:any) {
    let userTask = ref('')

    /* 添加任务 */
    function addToDoList() {
      if (userTask.value === '') return alert('请输入任务名称')
      emit('userTask', userTask)
      userTask.value = ''
    }

    return {
      userTask,
      addToDoList,
    }
  },
}
</script>

<style scoped>
header {
  width: 100%;
  height: 50px;
}

header input {
  width: 100%;
  height: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  outline: none;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
}
</style>